<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/assets/izimodal/css/iziModal.css" />
</head>
<body>

<div id="modal-custom" class="iziModal">
    <p>121212212</p>
    <p>121212212</p>
    <p>121212212</p>
    <p>121212212</p>
    <button onclick="closeDiv()">关闭</button>
</div>

<button onclick="openDiv()">打开</button><br/>

<script src="/assets/izimodal/js/jquery-3.2.1.min.js"></script>
<script src="/assets/izimodal/js/iziModal.js"></script>
<script>
    $("#modal-custom").iziModal({
        title: '你好',
        headerColor: '#88A0B9',
        width: 600,
        //comingIn, bounceInDown, bounceInUp, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX
        transitionIn: 'bounceInDown',
        //comingOut, bounceOutDown, bounceOutUp, fadeOutDown, fadeOutUp, , fadeOutLeft, fadeOutRight, flipOutX.
        transitionOut: 'bounceOutDown',
        transitionInOverlay: 'fadeIn',
        transitionOutOverlay: 'fadeOut',
        fullscreen: true
    });

    function openDiv() {
        $("#modal-custom").iziModal('open');
    }

    function closeDiv() {
        $("#modal-custom").iziModal('close');
    }
</script>
</body>
</html>